<template>
  <div class="service">
    <div class="title">
      <h2>{{ query.customerName }} 已选护理服务</h2>
      <!-- queryParams:{{ queryParams }} {{ query.customerName }}服务的客户 -->
    </div>
    <el-row v-loading="loading">
      <el-table :data="tableData" size="large">
        <el-table-column
          prop="indexId"
          label="序号"
          type="index"
          width="60"
          align="center"
        />
        <!-- <el-table-column prop="customerName">
              <template #default="scope"> #{{ scope.row }}</template>
            </el-table-column> -->
        <!-- <el-table-column prop="id" label="主键" width="100px" align="center" /> -->
        <el-table-column prop="customerName" label="客户" width="120px" align="center" />
        <el-table-column prop="serialNumber" label="编号" align="center" width="150px" />
        <el-table-column prop="nursingName" label="名称" align="center" width="100px" />
        <!-- <el-table-column prop="servicePrice" label="价格" align="center" width="100px" /> -->
        <el-table-column prop="nurseNumber" label="数量" align="center" width="150px" />
        <el-table-column
          prop="maturityTime"
          label="服务到期日期"
          align="center"
          width="180px"
        />
        <!-- <el-table-column prop="status" label="状态" width="100px" align="center" /> -->
        <el-table-column label="操作" align="center" width="220px">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              round
              @click="updateEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              round
              @click="deleteUser(scope.row.id)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 40px"
        layout="prev, pager, next, jumper, ->, total,"
        :total="queryParams.total"
        v-model:page-size="queryParams.size"
        v-model:current-page="queryParams.current"
        @current-change="queryList()"
        @size-change="queryList()"
      />
    </el-row>

    <el-dialog v-model="showEdit" title="用户编辑" style="width: 700px">
      <Edit v-if="showEdit" :closeEdit="closeEdit" :editId="editId" />
    </el-dialog>
  </div>
</template>

<script setup>
import Edit from "./edit.vue";
import { ref, toRef, onMounted } from "vue";
import {
  customerNurseItemDetails,
  deleteById,
} from "@/api/CareManagement/careSetup/index.js";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();

const { customerName } = defineProps(["customerName"]);

// const customerName = ref("");

const loading = ref(false);

// 监听路由参数的变化
let query = toRef(route, "query");

// 表格数据
const tableData = ref([]);

// 是否展示修改 的表单
const showEdit = ref(false);

// 关闭添加子组件页面 因为组件中需要有cancleEdit方法 所以加入query参数 true时刷新 false时不刷新
const closeEdit = (query) => {
  // 保存后关闭添加子组件页面 并重新查询
  showEdit.value = false;
  if (query) {
    queryList();
  }
};

// 点击修改按钮 将数值传入closeEdit方法 而后获得userid进行修改
// 待修改的用户editId
const editId = ref(0);

// 修改按钮跳转到子组件 并附带userid属性
const updateEdit = (id) => {
  // 赋值
  editId.value = id;
  showEdit.value = true;
};

// 查询条件
const queryParams = ref({
  customerName: query.value.customerName,
  current: 1,
  size: 5,
  total: 0,
  customerId: query.value.customerId,
});

async function queryList() {
  loading.value = true;
  try {
    const page = await customerNurseItemDetails(queryParams.value);
    loading.value = false;
    tableData.value = page.records;
    queryParams.value.total = page.total;
  } catch (e) {
    loading.value = false;
  }
}
// 删除按钮 调用更新方法
const deleteUser = (id) => {
  ElMessageBox.confirm("是否确认删除该用户信息?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteById(id).then((_success) => {
      console.log("删除的：", id);
      ElNotification({
        title: "消息",
        type: "success",
        message: "删除成功",
      });
      queryList();
    });
  });
};

onMounted(() => {
  queryList();
});

defineExpose({ queryList });
</script>

<style scoped>
/* 外出登记 */
.service {
}

.service .title {
  background-color: #ffffff;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-align: left;
  margin: 0;
  padding: 18px;
  color: #1890ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table {
  padding-left: 15px;
}

/* 表格样式 */
.table-header {
  color: #909399;
}

.table-row {
}

.table-row:hover {
}

.el-table {
  overflow: hidden;
}

.el-table th,
.el-table tr {
}

.el-table th {
  color: #909399;
  font-weight: bold;
}

.el-table td {
  color: #606266;
}

.el-table::before {
  height: 0;
}
</style>
